<template>
  <el-row>
    <el-col>
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item label="服务名称">
          <el-input v-model="formInline.servName" style="width: 215px" placeholder="服务名称"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
              v-model="formInline.servDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="queryService()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="fileCreate">创建服务</el-button>
        </el-form-item>
      </el-form>
      <!--      -->
      <vxe-table :data="tableData">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="servName" title="名称"></vxe-column>
        <vxe-column field="servDescribe" title="服务描述"></vxe-column>
        <vxe-column field="servDataType" title="数据库类型">
          <template #default="{ row }">
            <span v-if="row.servDataType === 41" >mysql</span>
            <span v-if="row.servDataType === 42" >oracle</span>
            <span v-if="row.servDataType === 43" >sql service</span>
          </template>
        </vxe-column>
        <vxe-column field="servUrl" title="IP地址"></vxe-column>
        <vxe-column field="servAccount" title="用户名"></vxe-column>
        <vxe-column field="servPassword" title="密码"></vxe-column>
        <vxe-column field="servLimit" title="应用范围">
          <template #default="{ row }">
            <span v-if="row.servLimit === 1" >开放</span>
            <span v-if="row.servLimit === 2" >条件开放</span>
            <span v-if="row.servLimit === 3" >线下</span>
          </template>
        </vxe-column>
        <vxe-column field="servDate" title="上线时间"></vxe-column>
        <vxe-column field="servState" title="启用/停止">
          <template #default="{ row }">
            <el-switch
                @change="updateState(row)"
                v-model="row.servState"
                :active-value='0'
                :inactive-value='1'
            ></el-switch>
          </template>
        </vxe-column>
        <vxe-column field="servId" title="操作" width="220px">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="authorizationService">授权</el-button>
            <el-button type="primary" size="mini" @click="updateService(row.servId)">更改</el-button>
            <el-button type="danger" size="mini" @click="deleteDataBase(row.servId)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-col>
  </el-row>
</template>

<script>
import pickerShortcut from "@/mixins/picker-shortcut";
import {queryServiceList, deleteDataBase, updateDataBaseState, queryDataBaseListByCondition} from "@/api/data_center/database-interface";


/**
 *{ 文件管理列表 }
 * @param:
 * @author: 宋康
 * @DateTime: 2022/7/8
 */
export default {
  name: "DaraBaseInterfaceList",
  mixins: [pickerShortcut],
  data() {
    return {
      formInline: {
        servName: '',
        servDate: '',
      },
      tableData: [],
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    /**
     *{ 开启/关闭服务 }
     * @param:
     * @author: 马凯
     * @DateTime: 2022/7/28
     */
    updateState(data){
      updateDataBaseState(data.servId, data.servState).then(res=>{
        if(res.status){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        }else {
          this.$message.error('操作失败');
        }
        // 刷新页面
        this.$router.go(0)
      })
    },
    /**
     *{ 查询服务 }
     * @param:
     * @author: 马凯
     * @DateTime: 2022/7/28
     */
    query() {
      queryServiceList(1, 10, 4).then(res=>{
        console.log(res.data)
        let data = res.data;
        if(data !== undefined){
          data.forEach(ref => {
            let time = this.dateFormat(ref.servDate);
            ref.servDate = time;
          })
          this.tableData = data
        }
      })
    },
    /**
     *{ 格式化时间 }
     * @param:
     * @author: 马凯
     * @DateTime: 2022/7/28
     */
    dateFormat(date) {
      let time = date.toString().substring(0,19).replace("T"," ");
      return time;
    },
    /**
     *{ 条件查询服务 }
     * @param:
     * @author: mk
     * @DateTime: 2022/5/3
     */
    queryService() {
      let form = this.formInline
      queryDataBaseListByCondition(1, 10, 4, form).then(res=>{
        let data = res.data;
        if(data !== undefined){
          data.forEach(ref => {
            let time = this.dateFormat(ref.servDate);
            ref.servDate = time;
          })
          this.tableData = data
        }
      })
    },
    /**
     * 重置查询条件
     * @param:
     * @author: mk
     * @DateTime: 2022/5/3
     */
    resetForm() {
      this.formInline.baseName = undefined;
      this.formInline.baseDate = undefined;
      this.query();
    },
    /**
     * 创建服务
     */
    fileCreate() {
      this.$router.push({
        name: "DaraBaseInterfaceAdd",
      });
    },
    /**
     * 修改服务
     */
    updateService(servId) {
      this.$router.push({
        name: "DaraBaseInterfaceEdit",
        query: {
          id: servId,
        }
      });
    },
    /**
     *{ 删除服务 }
     * @param:
     * @author: mk
     * @DateTime: 2022/5/3
     */
    deleteDataBase(servId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDataBase(servId).then(res=>{
          if(res.status){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            // 刷新页面
            this.$router.go(0)
          }else {
            this.$message.error('删除失败');
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     *{ 授权服务 }
     * @param:
     * @author: mk
     * @DateTime: 2022/7/28
     */
    authorizationService(){
      this.$router.push({
        name: 'ServiceManageAuthorization',
        query: {
          id: 123
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
